<template>
    <div class="account-manage">
        <!-- 标题栏 -->
        <van-nav-bar fixed title="账号管理" left-arrow @click-left="router.back()">
            <template #right>
                <van-icon name="ellipsis" size="18" />
            </template>
        </van-nav-bar>

        <div class="info">
            <div class="option">
                <span class="text">昵称</span>
                <input type="text" v-model="nickName">
            </div>
            <div class="option">
                <span class="text">个性签名</span>
                <input type="text" v-model="introduceSign">
            </div>
            <div class="option">
                <span class="text">修改密码</span>
                <input type="password" v-model="password">
            </div>
        </div>

        <button @click="onSave">保存</button>
        <button @click="loginOutClick">退出登录</button>
    </div>




</template>

<script setup>
import { ref, onMounted } from "vue"
import { showToast } from "vant";
import { getUserInfo, getCartData, saveEditedData, loginOut } from '@/api/index.js'
import { useRoute, useRouter } from "vue-router";
let route = useRoute();
let router = useRouter();

let nickName = ref('');
let loginName = ref('');
let introduceSign = ref('')
let password = ref('')


onMounted(() => {
    // 获取用户详细信息数据
    getUserInfo().then(res => {
        let { resultCode, data } = res;
        if (resultCode == 200) {
            nickName.value = data.nickName;
            loginName.value = data.loginName;
            introduceSign.value = data.introduceSign
        }
    })
})


let onSave = () => {
    saveEditedData( introduceSign.value, nickName.value, password.value ).then(res => {
        if (res.resultCode == 200) {
            showToast({
                type: 'success',
                message: '修改成功~~',
                duration:1500,
            })
            setTimeout(() => {
                router.replace('/user')
            },1500)
        }
    })
}

let loginOutClick = () => {
    loginOut().then(res => {
        if (res.resultCode == 200) {
            router.replace('/login')
        }
    })
}
</script>

<style scoped lang="less">
.account-manage{
    .info{
        margin-top: 2rem;

        .option{
            font-size: .4rem;
            border-bottom: 1px solid #ccc;
            height: 1.2rem;
            line-height: 1.2rem;
            .text{
                display: inline-block;
                width: 2rem;
                padding-left: .3rem;
                color: gray;
            }
            input{
                outline: none;
                border: transparent;
                padding-left: .5rem;
            }
        }
    }

    button{
        background: #1BAEAE;
        color: white;
        border: none;
        font-size: .4rem;
        display: block;
        width: 80%;
        height: 1.3rem;
        margin-top: 1rem;
        margin-left: 1rem;
        border-radius: .1rem;
    }
        button:active{
            background: pink;
            color: black;
        }
}
</style>